<template>
    <el-card>
            <template #header>
              <div class="card-header">
                <span>课程列表</span>
              </div>

            </template>
              <div class="neirong">
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column fixed prop="date" label="序号" width="100" />
                  <el-table-column prop="name" label="课程名称" width="170" />
                  <el-table-column prop="state" label="创建时间" width="130" />
                  <el-table-column prop="city" label="可见状态" width="130">
                    <el-switch v-model="kjzt" />
                  </el-table-column>
                  <el-table-column prop="address" label="操作" width="700">
                    <el-button><el-icon><EditPen /></el-icon></el-button>
                    <el-button><el-icon><Files /></el-icon></el-button>
                    <el-button><el-icon><Monitor /></el-icon></el-button>
                    <el-button><el-icon><School /></el-icon></el-button>
                  </el-table-column>
                  </el-table>
              </div>
            </el-card>   
</template>

<script>
import {EditPen,Files,Monitor,School} from '@element-plus/icons-vue'
export default{
  data(){
    return{
      tableData:[
        {
          date: '1',
          name: 'Java程序设计',
          state: '2020-12-12',
        },
        {
          date: '2',
          name: 'MySQL数据库技术',
          state: '2021-12-11',
        },
        {
          date: '3',
          name: 'Web前端开发基础',
          state: '2021-12-11',
        },
        {
          date: '4',
          name: 'web前端项目开发实战',
          state: '2021-12-11',
        }
      ],
      kjzt:false
    }
  },
  components:{
    EditPen,Files,Monitor,School
  }
}
</script>

<style>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.neirong{
  height:300px;
  text-align:center;
}
</style>